<template>
  <view>
    <uni-popup
      class="login-popup"
      mode="center"
      id="popupApp"
      mask-background-color="rgba(0,0,0,0.9)"
      ref="popupApp"
      :type="type_status"
      :animation="true"
    >
      <view class="login_container relative" style="background-color: #FFFFFF;padding:50rpx 44rpx 30rpx;border-radius: 20rpx;">
        <view
          class=""
          style="background-color: #FFFFFF;border-radius: 20rpx;">
          <view style="line-height: 80upx;color: #333333;font-size: 30upx;height: 80rpx;">
            内容描述
          </view>
          <view class="textarea_item">
            <textarea  maxlength="540" placeholder="请输入内容描述(最多540字符)" v-model="reportContent"
            style="width: auto;height: 300rpx;line-height: 40rpx;font-size: 26rpx;" />
          </view>
          99
          <view class="upload" style="border: 1px solid #f00">
            {{ addImgArray_arr }}
            <view class="uploadimgcont">
              <view class="uploadimga" v-for="(item,index) in addImgArray_arr" :key="index">
                <view class="delete" @click="imgdelete(index)">
                  <view class="deleteline">
                  </view>
                </view>
                <image @click="fangda(index)" :src="item" mode="aspectFill"></image>
              </view>
              <view style="border: 1px solid #f00;" v-if="!addImgArray_arr || addImgArray_arr.length<9" class="uploadimg" @click="chooseImage">
                88
                <image
                  src="@/static/msg/add-photo.png"
                  style="border-radius: 12rpx;" mode=""></image>
              </view>
            </view>
          </view>
        </view>
        <view class="footer1 flex" style="display: flex;align-items: center;justify-content: center;margin-top: 60rpx;">
          <u-button
            style="width: 240rpx;height: 80rpx;
                line-height: 80rpx;
                color: #666;
                border-radius: 80rpx;
                border: 1px solid #d9d9d9;
                background-color: #d9d9d9;
                margin-right: 30rpx;"
            text="取消"
            @click="cancelPopup"
            shape="circle"
          ></u-button>
          <u-button
            @click="submitReport"
            style="width: 240rpx;
              height: 80rpx;
              line-height: 80rpx;"
            text="确定"
            shape="circle"
            color="linear-gradient(to right, #1CD19F, #1FB0AC)"
          ></u-button>
        </view>
      </view>
    </uni-popup>
    <uploadImg :singleNum="false" ref="uploadImg" v-model="addImgArray_arr" permissionCameraContent="获取拍照权限是为了能够上传图片" permissionAlbumContent="获取相册权限，是为了能够上传图片" />
  </view>
</template>
<script>
import {
  validateNull
} from '@/common'
export default {
  name: 'report',
  props: {
    parentIsLogin: {
      type: String,
      default: 'login'
    }
  },
  data() {
    return {
      type_status: 'center',
      isChecked: false,
      isLogin: 'login',
      reportId: '',
      reportContent: '',
      addImgArray_arr: [],
      reportParams: {}
    }
  },
  created(){
    console.log(this.addImgArray_arr,'addImgArray_arr');

  },
  methods: {
    phoneLogin() {
      this.closeLoginPopup()
    },

    wechatLogin() {
      uni.navigateTo({
        url: '/personal/otherPhoneLogin/index'
      })
      this.closeLoginPopup()
    },
    // 上传图片
		async chooseImage() {
      let isLogin = await this.$refs.noLoginToast.open()
      if (!isLogin) {
        return
      }
      // let stutas = await requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
      // openAppSettingPermissions()
      // console.log('%c [ stutas ]-862', 'font-size:13px; background:pink; color:#bf2c9f;', stutas)
      let that = this
      if (that.addImgArray_arr.length >= 9) {
        uni.showToast({
          icon: 'none',
          title: '最多上传9张图片'
        })
        return
      }
      try {
        this.$refs.uploadImg.open()
      } catch (error) {
        uni.hideLoading()
      }
    },
    // 删除图片
    imgdelete(index) {
      // this.addimgArray.splice(index, 1)
      this.addImgArray_arr.splice(index, 1)
      // this.addimgArray.splice(index, 1)
    },
    closeLoginPopup() {
      this.$refs.popupApp.close()
    },
    submitReport() {
      if (validateNull(this.reportContent)) {
        return uni.showToast({
          title: '内容不能为空',
          icon: 'none',
          duration: 1000
        })
      }
      if (validateNull(this.addImgArray_arr)) {
        return uni.showToast({
          title: '图片不能为空',
          icon: 'none',
          duration: 1000
        })
      }
      // /api/client/complaint     POST
      // uid=投诉对象id，必传
      // msg=消息，必传
      // img=图片，非必传
      let params = {
        msg: this.reportContent,
        img: this.addImgArray_arr.join(','),
        ...this.reportParams
      }
      console.log('%c [ params ]-144', 'font-size:13px; background:pink; color:#bf2c9f;', params)
      // return
      this.post('api/client/complaint',params,true).then(res=>{
        if(res.code==1){
          uni.showToast({
            title: '举报成功',
            icon: "none",
            duration: 1000
          })
          this.closeLoginPopup()
        }else{
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000
          })
        }
      })
    },
    cancelPopup() {
      this.closeLoginPopup()
    },
    closeLoginPopup() {
      this.$refs.popupLogin.close()
    },
    // 提示获取手机号
    async getPhoneNumber() {
      // #ifdef APP-PLUS || H5
      // this.$refs.popupApp.open()
      let mobile = uni.getStorageSync('mobile')
      console.log('%c [ mobile ]-231', 'font-size:13px; background:pink; color:#bf2c9f;', mobile)
      if (!mobile) {
        this.isLogin = 'mobile'
        this.$refs.popupApp.open()
        return false
      }
      return true
      // #endif
    },
    // 默认是提示登录
    async open(params) {
      let that = this
      // #ifdef APP-PLUS || H5
      this.$refs.popupApp.open()
      this.reportParams = params
      return true
      // #endif
    }
  },
}
</script>
<style lang="scss">
.footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f4f4f4;
  margin-top: 30rpx;
  padding-bottom: 20rpx;

  button {
    margin: 0 auto;
    width: 100%;
    background-color: #19be6b;
    // width: 200upx;
    border-radius: 10upx;
    font-size: $uni-font-size-sm;
    // padding: 22upx 34upx;
    height: 80upx;
    font-size: 30rpx;
    line-height: 80upx !important;
    // line-height: 1;
    color: #ffffff;
  }

  button:after {
    border: 0;
  }
}
.login_container {
  width: 600rpx !important;
  margin: 0 auto;
  border-radius: 20rpx;
  // background: url("@/static/login/login_bg.png") no-repeat;
  // background-size: cover;
  // background-size: 100% 100%;
  padding-bottom: 60rpx !important;
  .footer1 {
    margin-top: 60rpx;
  }
}
.content-item {
  margin: 0 0 44rpx;
  text-align: center;
  line-height: 42rpx;
  color: #000;
  font-size: 36rpx;
}
.custom-style {
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  border-radius: 80rpx;
  border: 1px solid #d9d9d9;
  background-color: #d9d9d9;
  margin-right: 30rpx;
}
.custom-style-login {
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.login-popup /deep/ .uni-mask--hook {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.user_agreement_container /deep/ .private {
  margin-left: 40rpx;
}
.close_icon {
  position: absolute;
  top: 26rpx;
  right: 26rpx;
  z-index: 1;
}
// 上传图片
.upload {
		// background: #FFFFFF;
		// padding: 0 40rpx;
		// height: 100vh;
		// height: 700upx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #343434;
			padding-top: 15rpx;
		}

		.uploadimgcont {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			// margin-top: 50rpx;
			// margin:30upx 0 136upx;

			.uploadimga {
				width: 186rpx;
				height: 186rpx;
				margin-right: 24upx;
				margin-bottom: 40upx;
				position: relative;

				.delete {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: #5093ff;
					display: flex;
					align-items: center;
					justify-content: space-around;
					position: absolute;
					top: -10upx;
					left: -10upx;
					z-index: 4;

					.deleteline {
						background: #FFFFFF;
						height: 5rpx;
						width: 50%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.uploadimg {
				width: 120rpx;
				height: 120rpx;
				background: #F9F9F9;
				border-radius: 120rpx;
				// overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				view {
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					width: 100%;
					text-align: center;
					transform: translateX(-50%);
					font-size: 28rpx;
					color: #404040;
				}
			}
		}

}
.textarea_item {
  padding: 20rpx;
  border: 1rpx solid #ddd;
  margin-bottom: 20rpx;
}
</style>